'use client';

import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { FAQ } from '../faq/data';

type FaqAccordionProps = {
  faqs: FAQ[];
  className?: string;
};

export default function FaqAccordion({ faqs, className = '' }: FaqAccordionProps) {
  const [activeId, setActiveId] = useState<number | null>(null);

  const toggleFaq = (id: number) => {
    setActiveId(activeId === id ? null : id);
  };

  return (
    <div className={`space-y-4 ${className}`}>
      {faqs.map((faq) => (
        <div
          key={faq.id}
          className="border border-gray-200 rounded-lg overflow-hidden"
        >
          <button
            className={`w-full p-4 text-left flex justify-between items-center transition-colors ${
              activeId === faq.id ? 'bg-primary-50' : 'hover:bg-gray-50'
            }`}
            onClick={() => toggleFaq(faq.id)}
            aria-expanded={activeId === faq.id}
          >
            <h3 className="text-lg font-medium text-gray-800">{faq.question}</h3>
            <span className="text-primary-500 transition-transform duration-300" style={{
              transform: activeId === faq.id ? 'rotate(180deg)' : 'rotate(0)'
            }}>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-5 w-5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M19 9l-7 7-7-7"
                />
              </svg>
            </span>
          </button>
          
          <AnimatePresence>
            {activeId === faq.id && (
              <motion.div
                initial={{ height: 0, opacity: 0 }}
                animate={{ height: 'auto', opacity: 1 }}
                exit={{ height: 0, opacity: 0 }}
                transition={{ duration: 0.3 }}
              >
                <div className="p-4 bg-white border-t border-gray-200">
                  <p className="text-gray-700 whitespace-pre-line">{faq.answer}</p>
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      ))}
    </div>
  );
} 